<template>
  <a-card :bordered="false">
    <a-form :form="form">
      <a-form-item :label="$t('platformManagement.app.enable')" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-switch :disabled="!canEdit" v-decorator="['status', { valuePropName: 'checked' }]" />
      </a-form-item>
      <a-form-item :label="$t('platformManagement.app.customConfig')" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-switch
          :disabled="!canEdit"
          @change="handleStatusChange"
          v-decorator="['available', { valuePropName: 'checked' }]"
        />
      </a-form-item>
      <a-form-item :label="$t('platformManagement.app.serviceType')" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-radio-group :disabled="!canEdit" v-decorator="['mailType']">
          <a-radio-button value="IMAP">IMAP</a-radio-button>
          <a-radio-button value="SMTP">SMTP</a-radio-button>
          <a-radio-button value="POP3">POP3</a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item :label="$t('platformManagement.app.enableSSL')" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-switch :disabled="!canEdit" v-decorator="['ssl', { valuePropName: 'checked' }]" />
      </a-form-item>

      <a-form-item :label="$t('platformManagement.app.host')" :label-col="labelCol" :wrapper-col="wrapperCol">
        <s-input
          :disabled="!canEdit"
          v-decorator="[
            'host',
            {
              rules: [
                { required: isUsed, message: '主机名不能为空' },
                { pattern: HOST_REG, message: '请输入合法的ip或域名' }
              ]
            }
          ]"
          :limit="255"
        ></s-input>
      </a-form-item>

      <a-form-item :label="$t('platformManagement.app.port')" :label-col="labelCol" :wrapper-col="wrapperCol">
        <s-input
          :disabled="!canEdit"
          v-decorator="[
            'port',
            {
              rules: [
                { required: isUsed, message: '端口不能为空' },
                { pattern: PORT_REG, message: '请输入合法的端口号(0~65535)' }
              ]
            }
          ]"
        ></s-input>
      </a-form-item>

      <a-form-item :label="$t('platformManagement.app.sendAccount')" :label-col="labelCol" :wrapper-col="wrapperCol">
        <s-input
          :disabled="!canEdit"
          :limit="256"
          v-decorator="[
            'fromMail',
            {
              rules: [
                { required: isUsed, message: '发送账户不能为空', whitespace: isUsed },
                { type: 'email', message: '请输入合法的email地址' }
              ]
            }
          ]"
        ></s-input>
      </a-form-item>

      <a-form-item :label="$t('common.username')" :label-col="labelCol" :wrapper-col="wrapperCol">
        <s-input
          :disabled="!canEdit"
          :limit="256"
          v-decorator="[
            'userName',
            {
              rules: [{ required: isUsed, message: '用户名不能为空', whitespace: isUsed }]
            }
          ]"
        ></s-input>
      </a-form-item>

      <a-form-item :label="$t('common.password')" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-input-password
          :disabled="!canEdit"
          :maxLength="128"
          v-decorator="[
            'password',
            {
              rules: [{ required: isUsed, message: '密码不能为空', whitespace: isUsed }]
            }
          ]"
        ></a-input-password>
      </a-form-item>

      <a-form-item v-action:edit :colon="false" label=" " :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-button @click="handleReset">{{ $t('common.cancel') }}</a-button>
        <a-button style="margin-left: 20px" @click="handleSubmit" type="primary">{{ $t('common.submit') }}</a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
import { getMailConfig, updateMailConfig } from '@/api/company';
import { SInput } from '@/components';
import { HOST_REG, PORT_REG } from '@/utils/regExp';
export default {
  name: 'mailConfig',
  created() {
    this.init();
  },
  components: {
    SInput
  },
  data() {
    return {
      appId: this.$route.query.id,
      form: this.$form.createForm(this),
      labelCol: { lg: { span: 7 }, sm: { span: 7 } },
      wrapperCol: { lg: { span: 10 }, sm: { span: 17 } },
      isUsed: false,
      data: null,
      HOST_REG,
      PORT_REG,
      canEdit: this.$auth('edit', this.$route.meta.permissionId)
    };
  },
  methods: {
    init() {
      getMailConfig({ appId: this.appId }).then(res => {
        this.data = res.data || {};
        this.$nextTick(() => {
          const { status, available, mailType, ssl, host, port, fromMail, userName, password } = this.data;
          this.form.setFieldsValue({
            status: status ? true : false,
            available: available ? true : false,
            mailType,
            ssl,
            host,
            port: !!port ? port.toString() : '',
            fromMail,
            userName,
            password
          });
          this.isUsed = !!available;
        });
      });
    },
    handleStatusChange(checked) {
      this.isUsed = checked;
    },
    handleSubmit() {
      this.form.validateFields((err, value) => {
        console.log(err, value);
        if (err) {
          return;
        }
        const { id } = this.data;
        const { status, available, mailType, ssl, host, port, fromMail, userName, password } = value;

        updateMailConfig({
          id,
          appId: this.appId,
          status: status ? 1 : 0,
          available: available ? 1 : 0,
          mailType,
          host: !!host ? host.trim() : '',
          port: !!port ? port.trim() : '',
          fromMail: !!fromMail ? fromMail.trim() : '',
          userName: !!userName ? userName.trim() : '',
          password: !!password ? password.trim() : '',
          ssl: ssl,
          appId: this.appId
        }).then(res => {
          this.$message.success('修改邮件通知设置成功', 3);
        });
      });
    },
    handleReset() {
      this.init();
    }
  }
};
</script>

<style scoped>
.radio-style {
  display: block;
  height: 30px;
  line-height: 30px;
}
</style>
